<template>
    <div>
        <!--添加分类-->
         <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理

        </el-breadcrumb-item>
        <el-breadcrumb-item>商品分类
            
        </el-breadcrumb-item>
    </el-breadcrumb>
        <!-- 卡片视图区域 -->
        <el-card>
            <el-row>
                <el-col>
                    <el-button icon = "el-icon-circle-plus-outline" type = "primary" @click = "addcate">添加分类
                    </el-button>
                </el-col>
            </el-row>
            <!-- 表格区 -->
            <tree-table :columns = "columns" :data = "cateList" :expand-type = "false" :selection-type = "false"
                        :show-row-hover = "false" border class = "treeTable"
                        index-text = "#" show-index>
                <!-- 是否有效 -->
                <template slot = "isok" slot-scope = "scope">
                    <i v-if = "scope.row.cat_deleted === false" class = "el-icon-success"
                       style = "color: lightgreen; font-size: 15px;"></i>
                    <i v-else class = "el-icon-error"
                       style = "color: red; font-size: 15px;"></i>
                </template>
                <!-- 排序 -->
                <template slot = "order" slot-scope = "scope">
                    <el-tag v-if = "scope.row.cat_level == 0" size = "mini" type = "primary">一级</el-tag>
                    <el-tag v-else-if = "scope.row.cat_level == 1" size = "mini" type = "success">二级</el-tag>
                    <el-tag v-else size = "mini" type = "warning">三级</el-tag>
                </template>
                <!-- 操作 -->
                <template slot = "opt" slot-scope = "scope">
                    <el-button class = "catebtn" icon = "el-icon-edit" size = "mini" type = "primary"
                               @click = "editcate(scope.row.cat_id)">编辑
                    </el-button>
                    <el-popconfirm
                        cancel-button-text = '取消'
                        confirm-button-text = '确定'
                        icon = "el-icon-info"
                        icon-color = "red"
                        title = "确定删除该分类吗?"
                        @confirm = "deleteCate(scope.row.cat_id)"
                    >
                        <el-button slot = "reference" class = "catebtn" icon = "el-icon-delete" size = "mini"
                                   type = "danger">删除
                        </el-button>
                    </el-popconfirm>
                </template>
            </tree-table>
            <!-- 分页区 -->
            <Page :params = "params" :total = "total" @handleCurrentChange = "handleCurrentChange"
                  @handleSizeChange = "handleSizeChange"></Page>
        </el-card>
        <!-- 添加商品分类 -->
        <AddCate ref = "addcateRef" :ParentCatelist = "ParentCatelist" @getCateList = "getCateList"></AddCate>
        <!-- 编辑商品分类 -->
        <EditCate ref = "editRefs" :editForm = "editForm" @getCateList = "getCateList"></EditCate>
    </div>
</template>

<script>
import Page from '@/components/Page.vue';
import AddCate from './cate/AddCate.vue';
import EditCate from './cate/EditCate.vue';

export default {
    name: 'VueShopCate',
    components: {Page, AddCate, EditCate},
    data () {
        return {
            // 编辑表单数据
            editForm: [],
            // 商品分类列表
            cateList: [],
            // 父级分类列表
            ParentCatelist: [],
            // 获取分类请求参数
            params: {
                type: 3,      // 请求分类级别
                pagenum: 1,   // 默认页码
                pagesize: 5   // 当前每页显示多少条
            },
            // 总条数
            total: 0,
            // 为table 指定列的定义
            columns: [
                {
                    label: '分类名称',
                    prop: 'cat_name',
                    headerAlign: 'center'
                },
                {
                    label: '是否有效',
                    // 定义为模板列
                    type: 'template',
                    // 模板名称
                    template: 'isok',
                    align: 'center',
                    headerAlign: 'center'

                },
                {
                    label: '分类级别',
                    // 定义为模板列
                    type: 'template',
                    // 模板名称
                    template: 'order',
                    align: 'center',
                    headerAlign: 'center'
                },
                {
                    label: '操作',
                    // 定义为模板列
                    type: 'template',
                    // 模板名称
                    template: 'opt',
                    align: 'center',
                    headerAlign: 'center'
                }
            ]
        };
    },
    created () {
        this.getCateList();
    },
    methods: {
        /**
         * @desc 删除分类
         * @param {Number} cat_id
         */
        async deleteCate (cat_id) {
            const {data: res} = await this.$http.delete(`categories/${cat_id}`)
            if (res.meta.status !== 200) {
                return this.$message.error('删除分类失败');
            }
            this.$message.success('删除分类成功');
            this.getCateList();
        },
        // 根据id 查询分类
        async editcate (cat_id) {
            const {data: res} = await this.$http.get(`categories/${cat_id}`);
            if (res.meta.status !== 200) {
                return this.$message.error('查询分类失败');
            }
            this.editForm = res.data;
            this.$refs.editRefs.editDialogVisible = true;
        },
        /**
         * @name
         * @desc 添加商品分类①
         */
        addcate () {
            // 先获取父级分类列表
            this.getParentCatelist();
            this.$refs.addcateRef.addCateDialogVisible = true;
        },
        // 获取父级分类数据列表
        async getParentCatelist () {
            const {data: res} = await this.$http.get('categories', {params: {type: 2}});
            if (res.meta.status !== 200) {
                return this.$message.error('获取父级分类失败');
            }
            this.ParentCatelist = res.data;
        },
        /**
         * @获取商品分类数据
         */
        async getCateList () {
            const {data: res} = await this.$http.get('categories', {params: this.params});
            if (res.meta.status !== 200) {
                return this.$message.error('获取商品分类失败')
            }
            // 解构数据获取数据列表
            const {result, total} = res.data;
            // 赋值数据
            this.total = total;
            // 总条数
            this.cateList = result;
        },
        /**
         * @name handleSizeChange()
         * @param {Number} value
         * @desc 分页监听pagesize改变
         */
        handleSizeChange (value) {
            this.params.pagesize = value;
            this.getCateList();
        },
        /**
         * @name pagenum()
         * @param {Number} value
         * @desc 监听页码变化
         */
        handleCurrentChange (value) {
            this.params.pagenum = value;
            this.getCateList();
        },
    },
};
</script>

<style lang = "less" scoped>
.treeTable {
    margin-top: 15px;
    margin-bottom: 10px;
}

.catebtn {
    margin-left: 10px;
}
</style>
